<template>
  <div class="">
    <div class="body">
      <ul class="body-ul">

        <!--<li class="body-list list1 clearfixe">
          <div class="title">
            <p>又一中央委员被查 不辨大是大非步前任后尘</p>
            <b>热</b> <span>长安街知事 评论177</span>
          </div>
          <div class="pic">
            <img src="../assets/images/index_03.png" alt="">
          </div>
        </li>-->

        <li class="body-list list2 clearfixe" v-for="i in data.data">
          <div class="title">
            <p class="p">{{i.abstract}}</p>
            <!--<p>没有包装，小鲜肉们还能出道么，最后一个我是服的</p>-->
          </div>
          <div class="pic">
            <img :src='img.url' alt=""  v-for="img in i.image_list">
            <!--<img src="../assets/images/index_08.png" alt="">-->
            <!--<img src="../assets/images/index_10.png" alt="">-->
          </div>
          <span>常娱乐 评论406 2分钟前</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        data: []
      }
    },
    components: {},
    mounted: function () {
      this.$http.get('../../static/data.json').then(function (res) {
        this.data = res.data
        console.log(res.data)
      }, function () {
        alert("shibai")
      })
    }
  }
</script>
<style lang="scss">
  @import "../assets/css/base.css";

  @function rem($px) {
    @return $px / 20 + rem
  }

  .clearfixe:after {
    display: block;
    clear: both;
    content: '';
  }

  p {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

  }

  .body {
    .body-ul {
      padding: 0 rem(15);

      .body-list {
        border-bottom: 1px solid gainsboro;
        padding: rem(15) 0;
        .title {
          float: left;
          padding-top: rem(20);
          p {
            font-size: rem(30);
          }
          b {
            display: inline-block;
            width: rem(20);
            height: rem(20);
            font-size: rem(12);
            border: 1px solid red;
            border-radius: rem(5);
            color: red;
            text-align: center;
          }
          span {
            font-size: rem(15);
            color: darkgray;
          }
        }
        .pic {
          float: right;
          img {
            width: 100%;
          }
        }
      }
      .list1 {
        .title {
          width: 65%;
        }
        .pic {
          width: 30%;
        }
      }
      .body-list.list2 {
        .title {
          float: none;
          padding: 0;
        }
        .pic {
          float: none;
          img {
            display: inline-block;
            width: calc(98% / 3);
          }
        }
        span {
          font-size: rem(15);
          color: darkgray;
        }
      }
    }
  }
</style>
